 <template>
  <div>
    <el-card class="box-card">
      <div>

      </div>
      <el-row :gutter="8"
              type="flex"
              align="middle"
              class="btn_nav"
              style="margin-bottom:10px">
        <el-col :span="1.5">
          <el-button type="primary"
                     size="small">刷新</el-button>
          <el-upload class="upload-demo"
                     action="http://172.16.15.14:8081/system/pic">
            <el-button size="small"
                       type="primary">点击上传</el-button>
            <div slot="tip"
                 class="el-upload__tip">传啥都行</div>
          </el-upload>
        </el-col>

      </el-row>
      <el-table :data="tableData"
                v-loading="loading"
                style="width: 100%"
                :header-cell-style="{background:'#f8f8f9','text-align':'center'}"
                :cell-style="{'text-align':'center'}">

        <el-table-column prop="url"
                         label="url">
        </el-table-column>
        <el-table-column prop="url"
                         label="图片">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px;"
                      :src="scope.row.url"
                      :preview-src-list="[scope.row.url]">
            </el-image>
          </template>
        </el-table-column>

      </el-table>

    </el-card>

  </div>
</template>


<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.getDate()
  },
  methods: {
    async getDate() {
      this.loading = true
      let { data } = await this.$axios.get('system/pic/list')
      console.log(data)
      this.tableData = data.rows
      this.total = data.total
      this.loading = false
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.getDate()
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val
      this.getDate()
    }
  }
}
</script>

<style>
.page {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>